<template>
    <div class="ph-field-group">
        <slot></slot>
    </div>
</template>
<style lang="scss">
.ph-field-group{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    width: 100%;
    .ph-field-plain{
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .ph-field-group{
        .ph-field{
            flex:0 0 auto;
            width: 100%;
        }
    }
}
@media screen and (min-width: 769px) {
    .ph-field-group{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-column-gap: var(--ph-15);
        .ph-field{
            flex:1;
        }
    }
}
</style>
